<template>
<!--  <div style="height: 64px" class="d-flex">-->


<!--  <v-app-bar  class="bar-black d-flex" >-->
  <div class="container">
    <v-container class="top" style="max-width: 1360px;" >
      <v-row
         no-gutters
         style="height: 64px;">
        <v-col class="">
          <v-sheet class="ma-2 pa-2 left">
            <v-icon icon="mdi-email-open-outline "></v-icon>
            <v-icon icon="mdi-facebook "></v-icon>
            <v-icon icon="mdi-twitter "></v-icon>
          </v-sheet>
        </v-col>

        <v-col class="">
          <v-sheet class="ma-2 pa-2 center">
            <div class="center-left ">{{"<"}}</div>
            <div class="center-item text-xs ">Save 20% use code: BULKSAVE</div>
            <div class="center-right ">></div>
          </v-sheet>
        </v-col>

        <v-col class="">
          <v-sheet class="ma-2 pa-2 right">
            <span class="text-sm ">
              what do you want
            </span>
          </v-sheet>
        </v-col>
      </v-row>
    </v-container>
  </div>
<!--  </v-app-bar>-->
<!--  </div>-->
</template>

<script lang="ts" setup>

</script>


<style lang="less" scoped>
.container{
  width: 100%;
  background-color: black;
}
.top{
  background-color: black !important;
  display: flex;
  //.v-toolbar__content{
  //  height: 40px !important;
  //}
  .v-sheet{
    color: #ffffff;
    background-color: black !important;
  }
  .left{
    display: flex;
    justify-content: flex-start;
    .v-icon{
      margin: 7px;
    }
  }
  .right{
    display: flex;
    justify-content: flex-end;
    span{
      //font: inherit;
      margin: 7px;
    }
  }
  .center{
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    .v-sheet{
      padding: 10px;
      margin: 5px;
    }
    .center-item {
      padding: 10px;
      margin: 5px;
      //font-size: 14px;
    }

    /* 最左一个 */
    .center-left {
      margin-right: auto;
    }

    /* 最右一个 */
    .center-right {
      margin-left: auto;
    }
  }
}

</style>
